<script setup>
import { ref, reactive, onMounted } from "vue";
import { getBrList } from "@/api/index";

const bannerList = ref();
// 获取banner图列表
const getbannerList = async () => {  //同步调用
    const {
        data: { data },
    } = await getBrList();
    // console.log(data);
    bannerList.value = data;
    // console.log(bannerList);
};
// function getBList() {
//     getBrList().then((res) => { // 异步调用
//         bannerList.value = res.data.data;
//     }).catch((err) => {
//         alert(123)
//     })
// }
// const getBList = async () => {  //带错误捕捉的同步调用
//     try {
//         let { data } = await getBrList();
//         bannerList.value = data.data
//     } catch {
//         alert(123)
//     }
// }
onMounted(()=>{
    getbannerList();
    // getBList();
})
</script>

<template>
    <div id="box">
        <div>
            
        </div>
        <!-- <div class="banner">
            <t-swiper class="tdesign-demo-block--swiper" :duration="300" :autoplay="true" :interval="2000">
                <t-swiper-item v-for="item in bannerList" :key="item.id" class="t-swiper-item">
                    <div class="demo-item">
                        <img :src="item.image" alt="" />
                    </div>
                </t-swiper-item>
            </t-swiper>
        </div> -->
    </div>
</template>

<style lang="scss">
.banner {
    .tdesign-demo-block--swiper {
        img {
            width: 100%;
            height: 650px;
        }
    }
}
</style>